<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="./stylesheets/main.css" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"/>

        <!-- Librerías de JQuery -->
        <script type="text/javascript" src="jQuery/js/jquery.min.js"></script>
        <script type="text/javascript" src="jQuery/js/jquery-ui.custom.min.js"></script>


        <!-- Librerías del plugin de rating para JQuery-->
        <script type="text/javascript" src="jQuery/js/jquery.ui.stars.js"></script>
        <link rel="stylesheet" type="text/css" href="jQuery/css/crystal-stars.css" />

        <!--Librerías de FancyBox-->
        <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
        <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


        <script type="text/javascript">

            //Esta función actuliza los componentes que permiten visualizar la media y el número de votos.
            //También fija el número de estrellas a mostrar en función de la media
            //Esta función se llama cuando se cargan los saludos y cuando se vota un saludo.
            function fijarVotos(datos) {                
                var selectorAvg = "form[mensaje='" + datos.idMensaje + "'][esAvg='si']";
                var selectorAllVotes = "span[mensaje='" + datos.idMensaje + "'][tipo='all_votes']";
                var selectorAvgVotes = "span[mensaje='" + datos.idMensaje + "'][tipo='avg_votes']";
                // Select stars from "Average rating" control to match the returned average rating value
                $(selectorAvg).stars("select", Math.round(datos.avg));

                // Update other text controls...
                $(selectorAllVotes).text(datos.votes);
                $(selectorAvgVotes).text(isNaN(datos.avg)?datos.avg:datos.avg.toFixed(2));
            }


            function enlaceConectar() {
                $.get("/getLoginURL",null,
                    function(html) {
                        $("#conectar").html(html);
                    }

               );
            }

            
            $(document).ready(


            
            function(){

                enlaceConectar();

                <c:if test="${not empty sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal}">
                        $(".${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username}").css("visibility","visible");

                </c:if>
                


                $("div.saludo").fancybox(                
                {
                    'modal'                     : true,
                    'showCloseButton'           : false,
                    'enableEscapeButton'     	:       false,
                    'transitionIn'	:	'elastic',
                    'transitionOut'	:	'elastic',
                    'speedIn'		:	1200,
                    'speedOut'		:	1200,
                    'overlayShow'	:	false,
                    'autoDimensions'    :       false,
                    'width'    :       400,
                    'height'    :       150
                });

                $("div.saludo").click(
                    function(event) {                                       
                        var idMensajeSelect = $(event.currentTarget).find("form").attr("mensaje");
                        $.get(
                            "/getVoto",
                            {
                                idSaludo: idMensajeSelect
                            },
                            function(datos) {
                                var voto = $.parseJSON(datos);
                                var fijarVoto = 0;
                                if (voto) {
                                    fijarVoto = voto.voto;
                                }
                                var selectorVoto = "form[mensaje='" + idMensajeSelect + "'][esRat='si']";
                                $(selectorVoto).stars("select", fijarVoto);
                            },
                            "json"
                        );
                    }
                );

               
              
                //Enviamos un array con los ids de los mensajes para poder obtener un array con las puntuaciones medias y el total de votos de cada mensaje
                var idsMensajes = new Array();
            <c:forEach var="greeting" items="${greetings}" varStatus="status">
                    idsMensajes[${status.index}]={idMensaje:${greeting.id}};
            </c:forEach>
                    var jsonArray = idsMensajes.toSource();
                    //alert(jsonArray);

                    $.get("/mostrarDatosVotos", {
                        mensajes: jsonArray
                    }, function(db) {
                        //alert(db);
                        var datos = $.parseJSON(db); //Obtenemos un array de Javascript a partir de los datos recuperados del servidor
                        //alert(datos.length);
                        $(datos).each(function(index,value) {
                            fijarVotos(value);
                        });

                    }, "json");


                    $(function() {
                        $("[esAvg='si']").children().not(":input").hide();
                        $("[esRat='si']").children().not("select, #messages").hide();

                        // Create stars for: Average rating
                        $("[esAvg='si']").each(function() {
                            $(this).stars();
                        }
                    );


                        // Create stars for: Rate this
                        $("[esRat='si']").each(function() {

                            var idMensaje = $(this).attr("mensaje");
                            var selectorVoto = "span[mensaje='" + idMensaje + "'][tipo='voto']";
                            var selectorMensaje = "div[mensaje='" + idMensaje + "']";

                            //alert($(selectorVoto).attr("mensaje"));


                            $(this).stars(
                            {
                                inputType : "select",
                                cancelShow : false,
                                captionEl : $(selectorVoto),
                                callback : function(ui, type, value) {
                                    // Disable Stars while AJAX connection is active
                                    ui.disable();

                                    // Display message to the user at the begining of request
                                    $(selectorMensaje).text("Saving...").stop().css("opacity",
                                    1).fadeIn(30);

                                    // Send request to the server using POST method
                                    /* NOTE:
                                                        The same PHP script is used for the FORM submission when Javascript is not available.
                                                           The only difference in script execution is the returned value.
                                                        For AJAX call we expect an JSON object to be returned.
                                                        The JSON object contains additional data we can use to update other elements on the page.
                                                        To distinguish the AJAX request in PHP script, check if the $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.
                                                        (see: demo5.php)
                                     */
                                    $.get("/votar", {
                                        voto : value,
                                        idMensaje: $(selectorVoto).attr("mensaje")
                                    }, function(str) {
                                        if (str) {
                                            var db = $.parseJSON(str);



                                            // Display confirmation message to the user
                                            $(selectorMensaje).text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);

                                            fijarVotos(db)
                                            // Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
                                            setTimeout(function() {
                                                $(selectorMensaje).fadeOut(1000, function() {
                                                    ui.enable()
                                                })
                                            }, 2000);
                                            setTimeout(function() {
                                                $.fancybox.close();
                                            }, 4000);
                                        } else {
                                            ui.enable();
                                            $(selectorMensaje).text("");
                                            $.fancybox.close();
                                            alert ("Voto no registrado. Debe estar conectado para poder votar");
                                        }

                                    }, "json");
                                }
                            });
                        });

                        // Since the <option value="3"> was selected by default, we must remove selection from Stars.
                        $("[esRat='si']").stars("selectID", -1);
                    }
                  );
                });          
        </script>
    </head>



    <body>

        <div id="conectar"></div>
        
        

       
        
        <hr/>
        <form action="/guestbook_crear_mensaje" method="post">
            <div><input name="content" size="25"/></div><br/>
            <div><input type="submit" value="Post Greeting"/></div>
        </form>

        <hr/>

        <br/>



        <center>Hay  ${numeroMensajes} saludos
            <br/>Ir a página
            <br/>
            <c:forEach items="${numerosPaginas}" varStatus="status" var="numeroPagina">
                <a href="guestbook_ver_mensajes?pagina=${numeroPagina}">${numeroPagina}</a>
            </c:forEach>
        </center>
        <hr/>
        <c:choose>
            <c:when test="${!empty greetings}">
                <c:forEach var="greeting" items="${greetings}" varStatus="status">
                    <sec:authorize access="hasRole('ROLE_ADMIN')">
                                <form action="/guestbook_borrar_mensaje" method="post">
                                        <input type="submit" value="borrar"/>
                                        <input type="hidden" name="idMensaje" value="${greeting.id}" />
                                    </form>
                        </sec:authorize>
                    
                    <div class="saludo" href="#dialog${greeting.id}">
                        <b><fmt:formatDate value="${greeting.fecha}" pattern="dd/MM/yy hh:mm:ss"/></b>,
                           
                        <c:choose>
                            <c:when test="${empty greeting.author}">
                                <b>anonymous:</b>,
                            </c:when>
                            <c:otherwise>
                                <b><c:out   value="${greeting.author}"/></b>,
                            </c:otherwise>
                        </c:choose>
                        <c:out value="${greeting.content}"/><br/>

                        

                        <div style="display: none;">
                            <div id="dialog${greeting.id}" >
                                <c:out value="${greeting.content}"/><br/>

                                <div class="${greeting.author}" style="visibility:hidden">
                                    <form action="/guestbook_borrar_mensaje" method="post">
                                        <input type="submit" value="borrar"/>
                                        <input type="hidden" name="idMensaje" value="${greeting.id}" />
                                    </form>
                                </div>


                                <div class="rating-R">
                                    <strong>Rate this:</strong> <span tipo="voto" mensaje="${greeting.id}"></span>
                                    <form esRat="si" action="" method="get" mensaje="${greeting.id}">
                                        <select name="rate">
                                            <option value="1">Not so great</option>
                                            <option value="2">Quite good</option>
                                            <option value="3">Good</option>
                                            <option value="4">Great!</option>
                                            <option value="5">Excellent!</option>

                                        </select> <input type="submit" value="Rate it!" />


                                    </form>
                                </div>
                                <div id="messages" mensaje="${greeting.id}"></div>




                            </div>
                        </div>

                        <div class="ratings">
                            <table><tr><td>
                                        <div class="rating-L">
                                            <strong>Average rating</strong> <span>(<span tipo="all_votes" mensaje="${greeting.id}"></span>
				votes; <span tipo="avg_votes" mensaje="${greeting.id}"></span>)
                                            </span>
                                            <form esAvg="si" mensaje="${greeting.id}" style="width: 200px">

                                                <input type="radio" name="rate_avg" value="1" title="Not so great"
                                                       disabled="disabled" /> <input type="radio" name="rate_avg"
                                                       value="2" title="Quite good" disabled="disabled" /> <input
                                                       type="radio" name="rate_avg" value="3" title="Good"
                                                       disabled="disabled" /> <input type="radio"
                                                       name="rate_avg" value="4" title="Great!" disabled="disabled" /> <input
                                                       type="radio" name="rate_avg" value="5" title="Excellent!"
                                                       disabled="disabled" />

                                            </form>
                                        </div>
                                    </td>
                                </tr></table>

                        </div>
                        <br/>
                        <hr/>

                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <p>The guestbook has no messages.</p>
            </c:otherwise>
        </c:choose>





    </body>

</html>